<script setup>
const props = defineProps({
  direction: {
    type: String,
    default: 'row', // 默认横向排列
    validator: (value) => ['row', 'column'].includes(value), // 限制为 row 或 column
  },
  gap: {
    type: String,
    default: '0', // 默认间距为 0
  },
  wrap: {
    type: Boolean,
    default: false, // 默认不换行
  },
});
</script>

<template>
  <div
      class="flex-between"
      :style="{
      flexDirection: props.direction,
      gap: props.gap,
      flexWrap: props.wrap ? 'wrap' : 'nowrap',
    }"
  >
    <slot></slot>
  </div>
</template>

<style scoped>
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>